<template>
  <div style="display: flex;flex-direction: column;width: 100vw;">
    <div style="height: 60px;display: flex;align-items: center;justify-content: center;">
      <el-alert
          title="提示"
          description="该功能可以上传做了标识的招标文件与编制好的投标文件，两者进行自动匹配分析，检查投标文件是否存在丢项落项，是否与招标要求相符。产生的报告可至“我的报告单”模块查看。"
          type="info"
          show-icon/>
    </div>

    <div style="margin-top: 2%">
      <el-upload
          class="upload-demo"
          drag
          :action="uploadUrl"
          :before-upload="beforeUpload"
          :on-success="handleSuccess"
          :on-error="handleError"
          :show-file-list="false"
          multiple
      >
        <el-icon class="el-icon--upload">
          <upload-filled/>
        </el-icon>
        <div  class="el-upload__text">
          拖拽两份pdf文件到此处或者 <em>点击上传</em>
        </div>
        <template #tip>
          <div class="el-upload__tip">
            同时上传做了标识的招标文件和编制好的投标文件
          </div>
        </template>
      </el-upload>
    </div>

  </div>
</template>

<script setup>
import {UploadFilled} from '@element-plus/icons-vue'
import {computed} from 'vue';
import {PYTHON_API_BASE_URL} from '@/config';
import {ElMessage} from 'element-plus';
const dataString = localStorage.getItem('data');
// 通过JSON.parse转换字符串为对象
const data = dataString ? JSON.parse(dataString) : null;

const uploadUrl = computed(() => PYTHON_API_BASE_URL + '/automaticBidEvaluation?userId=' + data.userId);

const beforeUpload = (file) => {
  if (file.type !== 'application/pdf') {
    ElMessage.error('只能上传PDF文件');
    return false;
  }
  return true;
}

// 上传文件成功时处理函数
const handleSuccess = (response, file, fileList) => {
  ElMessage.success(`文件${file.name}上传成功`);
};


// 上传文件出现错误时处理函数
const handleError = (error, file, fileList) => {
  ElMessage.error(`文件${file.name}上传出错`);
};


</script>

<style scoped>
.el-alert {
  margin: 20px 0 0;
}

.el-alert:first-child {
  margin: 0;
}
</style>